<!DOCTYPE html>
<html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>自己练习  单项监视</title>
      </head>
      <body>
      <!--
      1. 计算属性
        在computed属性对象中定义计算属性的方法
        在页面中使用{{方法名}}来显示计算的结果
      2. 监视属性:
        通过通过vm对象的$watch()或watch配置来监视指定的属性
        当属性变化时, 回调函数自动调用, 在函数内部进行计算
      3. 计算属性高级:
        通过getter/setter实现对属性数据的显示和监视
        计算属性存在缓存, 多次读取只执行一次getter计算
      -->
              <div id="demo">
                  姓: <input type="text" placeholder="请输入 姓" v-model="name1"><br>
                  名: <input type="text" placeholder="请输入 名" v-model="name2"><br>
                  <!--fullName1是根据fistName和lastName计算产生-->
                  姓名2(单向 监视): <input type="text" placeholder="" v-model="name3_name4"><br>
              </div>
      </body>
</html>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
       var vm =  new Vue({
              el : "#demo",
              data : {
                    name1 : "a",
                    name2 : "b",
                    name3_name4 : "c",
              },
            // 监视方式一
            watch : {
                  name1:function(data1 , data2){
                    console.log(data1,data2)
                      vm.name3_name4 =  data1 + this.name2
                  }
            }
        })
        // 监视方式二
       vm.$watch('name2',function (data1,data2){
           console.log(data1,data2)
            vm.name3_name4 =   this.name1 + data1
       })
</script>

